<template>
  <div>
    <n-form ref="formRef" inline :label-width="80" :model="userInfoFrom">
      <n-form-item label="手机号" path="phone">
        <n-input v-model:value="userInfoFrom.phone" placeholder="输入手机号" />
      </n-form-item>
      <n-form-item label="密码" path="password">
        <n-input v-model:value="userInfoFrom.password" placeholder="输入密码" />
      </n-form-item>
      <n-form-item>
        <n-button attr-type="button" @click="handleValidateClick"> 登陆 </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useUserStore } from '@/store/index.js'

const userInfoFrom = reactive({
  phone: '',
  password: '',
})

const userStore = useUserStore()

const handleValidateClick = () => {
  console.log(userInfoFrom)
  userStore.getInfo(userInfoFrom)
}
</script>

<style lang="scss" scoped></style>
